import React, { useState } from 'react'
import { getCp } from '../../axios/use'
import { useLoaderData, useNavigate, useSearchParams } from 'react-router-dom'
import Myitem from '../../compont/Myitem'
import { NavBar, InfiniteScroll } from 'antd-mobile'
import { LoopOutline } from 'antd-mobile-icons'
const Index = () => {
    const [sp] = useSearchParams()
    const nav = useNavigate()
    const LoaderData = useLoaderData()
    const [list, setList] = useState(LoaderData.list)
    console.log(list);
    const [hasMore, setHasMore] = useState(true)
    const [page,setPage]=useState(1)
    async function loadMore() {
        setPage((page)=>page+1)
        const data={...Object.fromEntries(sp),page:page+1}
        const {data:res}=await getCp(data)
        setList([...list,...res])
        if(res.length===0)
        {
            setHasMore(false)
        }
    }
    return (
        <div>
            <div>
                <NavBar onBack={() => nav(-1)} style={{ fontSize: '15px' }}>
                    <span>{sp.get('start')}</span><span><LoopOutline /></span><span>{sp.get('end')}</span>
                </NavBar>
            </div>
            <div>
                {
                    list.map((item) => (
                        <Myitem key={item.id} {...item} />
                    ))
                }
                <InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
            </div>
        </div>
    )
}

export default Index
export const loader = async ({ request }) => {
    const url = new URL(request.url)
    const sj = Object.fromEntries(url.searchParams)
    const { data: res } = await getCp(sj)
    return {
        list: res
    }
}
